<template>
  <div class="my-daily">
    <div class="title">
      <el-button v-auth="'add'" type="primary" :icon="Plus" @click="add"> 新增配件 </el-button>
    </div>
    <div class="demo-collapse">
      <el-scrollbar>
        <div class="cot-list-wrap">
          <ul ref="listWrapRef" class="cot-list" :style="`--gap: ${gap}px ${gap}px`">
            <li class="list-item" v-for="(item, index) in productModel" :key="index" @click="jump(item.id)">
              <div class="img">
                <img :src="urlResource + item.imagePath" />
              </div>
              <p>
                <span class="item-title mle" :title="item.name">{{ item.name }}</span>
                <span>品牌：{{ item.brandName }}</span>
                <span>型号：{{ item.partsModel }}</span>
              </p>
              <div @click.stop class="position">
                <el-dropdown trigger="click" v-auth="{ not: ['update', 'delete'] }">
                  <span class="el-dropdown-link">
                    <div class="tit-right">...</div>
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="handleEdit(item)" v-auth="'update'"> 编辑 </el-dropdown-item>
                      <el-dropdown-item @click="handleDelete(item)" v-auth="'delete'">删除</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </li>
          </ul>
          <el-empty :image-size="200" v-if="!productModel.length" description="暂无项目" />
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, onBeforeUnmount } from "vue";
import mittBus from "@/utils/mittBus";
import { Project } from "@/api/interface/project";
import { getProductCategoryPartAll, partDetail, partDelete } from "@/api/modules/carType";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";

let gap = ref(15);
const listWrapRef = ref();
const commonParams = ref({
  typeId: null,
  brandId: null,
  name: ""
});

const urlResource = window?.staticConfig.urlResource;
// 查询所有配件列表
let productModel: Project.ResProjectData = ref([]);
const searchAccessory = async (params?: any) => {
  try {
    commonParams.value = { ...commonParams.value, ...params };
    const { data } = await getProductCategoryPartAll(commonParams.value);
    productModel.value = data || [];
  } catch (error) {
    console.log(error);
  }
};

const handleEdit = async (item: any) => {
  const res = await partDetail({ id: item.id });
  mittBus.emit("detailAccessory", { ...res.data, uiType: 1 });
};
const handleDelete = async (item: any) => {
  await partDelete({ id: item.id });
  ElMessage.success({ message: `删除配件成功！` });
  searchAccessory();
};

// 查看详情
const jump = async (id: string) => {
  const res = await partDetail({ id });
  mittBus.emit("detailAccessory", { ...res.data, uiType: 2 });
};

mittBus.on("searchAccessory", searchAccessory);

const objResizeObserver = new ResizeObserver(function () {
  // const entry = entries[0];
  // const cr = entry.contentRect;
  // const num = Math.floor(cr.width / 310);
  // gap.value = (cr.width - num * 310) / (num - 1);
});
const add = () => {
  mittBus.emit("addAccessory");
};
onBeforeUnmount(() => {
  objResizeObserver.unobserve(listWrapRef.value);
});
onMounted(() => {
  // 观察文本域元素
  objResizeObserver.observe(listWrapRef.value);
  searchAccessory({ name: "" });
});
</script>
<style scoped lang="scss">
.my-daily {
  height: 100%;
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 30px;
  }
  .demo-collapse {
    height: calc(100% - 60px);
    .cot-list-wrap {
      padding: 0 30px;
    }
  }
  .cot-list {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(auto-fill, 310px);
    gap: var(--gap);
    padding: 10px 2px;
    .list-item {
      position: relative;
      display: flex;
      align-items: center;
      padding: 0 20px;
      cursor: pointer;
      border: 1px solid #f5f5f5;
      border-radius: 4px;
      box-shadow: none !important;
      &:hover {
        outline: 2px solid var(--el-color-primary);
      }
      .img {
        display: flex;
        flex: 0 0 100px;
        width: 100px;
        height: 100px;
        background: #fafafc;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      p {
        display: flex;
        flex-flow: column nowrap;
        gap: 10px;
        padding-left: 10px;
        .item-title {
          margin-bottom: 20px;
          font-size: 14px;
          color: #333333;
        }
      }
      p > span {
        font-size: 12px;
        font-weight: 400;
        color: #999999;
      }
      .position {
        position: absolute;
        top: 10px;
        right: 10px;
        .tit-right {
          display: flex;
          align-self: flex-start;
          margin-top: 10px;
          margin-right: 0;
          font-weight: bold;
          line-height: 0;
          color: #333333;
          letter-spacing: 3px;
          cursor: pointer;
          transform: rotate(-90deg);
        }
      }
    }
  }
}
ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}
</style>
